<template>
  <div class="container">
    <img
      class="img"
      ref="imageRef"
      :src="props.src"
      @load="handleImageLoad"
    />
    <b>{{ props.desc }}</b>
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, ref, Ref  } from "vue";

const props = defineProps(["src", "desc"]);
const imageRef: Ref<HTMLImageElement | null> = ref(null);

const handleImageLoad = () => {
  const img = imageRef.value;
  if (img) {
    console.log('img:', img)
    if (img.naturalHeight > img.naturalWidth) {
        img.style.width = '50%'
    }
  }
};

</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;

  .img {
    width: 80%;
    height: auto;
  }
}
</style>
